<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <!-- 通过视图来渲染 -->
    <!-- <router-view></router-view> -->
    <hello-world></hello-world>
    引入组件模式
    {{totalPrice}}
  </div>
</template>

<script>
/* 引入组件模式,必须使用{}的格式 */
import helloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components:{
    helloWorld //组件的名字与引入的组件名相同
  },
  computed:{
    totalPrice(){
      //return this.$store.state.totalPrice  //全局实例化属性
      //第二种方法
      return this.$store.getters.getTotal //切记不要写成getTotal()方法
    }
  }
}
</script>

<style lang="scss" scoped="" type="text/css">
 @import './src/assets/css/index.scss';

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
a{color:inherit;text-decoration:none}
body{background:#f0f2f5;font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;font-size:14px;color:#444}
.app-head{background:#363636;color:#b2b2b2;height:90px;line-height:90px;width:100%}
.app-head-inner{width:1200px;margin:0 auto}
.head-logo{float:left;margin-top:20px}
.head-logo img{width:50px}
.head-nav{float:right}
.head-nav ul{overflow:hidden}
.head-nav li{cursor:pointer;float:left}
.nav-pile{padding:0 10px}
.app-foot{text-align:center;height:80px;width:100%;line-height:80px;background:#e3e4e8;clear:both;margin-top:30px}
.container{width:1200px;margin:0 auto}
.hr{height:1px;width:100%;background:#ddd}
.button{background:#4fc08d;color:#fff;display:inline-block;padding:10px 20px;cursor:pointer}
.button:hover{background:#4fc08d}
.g-form-line{padding:15px 0}
.g-form-label{width:100px;font-size:16px;display:inline-block}
.g-form-input{display:inline-block}
.g-form-input input{height:30px;width:200px;line-height:30px;vertical-align:middle;padding:0 10px;border:1px solid #ccc}
.g-form-btn{padding-left:100px}
</style>
